<template>
  <div class="query-div">
    <a-form
        ref="pageTableRef"
        :model="searchInfo"
        name="query_form"
        layout="inline"
        class="query-form"
    >
      <slot slot="searchSlot"/>
    </a-form>
    <div class="query-button">
      <div>
        <a-button :loading="loading" v-if="showReset" @click="searchRes">查询</a-button>
        <a-button type="primary" v-if="showAdd" @click="addRes">新增</a-button>
        <a-button type="dashed" v-if="showReset" @click="resetForm">重置</a-button>
      </div>
    </div>
  </div>
  <a-table
      :columns="columns"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
  >
    <template #expandedRowRender="{ record }">
      <slot slot="tableSlot" :value="record" />
    </template>
  </a-table>
</template>

<script>
import {computed, getCurrentInstance, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch} from "vue";
import {apiRequest} from "@/service/service";

export default {
  name: "PageTable",
  props: {
    searchInfo: {
      type: Object,
      required: true
    },
    searchFun: {
      type: Function,
      required: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showAdd: {
      type: Boolean,
      default: true
    },
    showReset: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Object,
      required: true
    },
  },
  emits: ['on-add', 'on-change'],
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    const pageTableRef = ref()
    const loading = ref(false)
    const current = ref(1)//当前页面
    const size = ref(5)//页面大小
    const total = ref()//总条数
    const dataSource = reactive({
      data: []//数据
    })

    /** 获取列表数据 **/
    function getData() {
      loading.value = true
      props.searchInfo.current = current.value
      props.searchInfo.size = size.value
      apiRequest(props.searchFun(props.searchInfo), response => {
        loading.value = false
        let data = response.data
        dataSource.data = data.records
        current.value = data.current
        size.value = data.size
        total.value = data.total
      });
    }

    /** 加载完后获取一次数据 **/
    onMounted(() => getData())

    /** 时间范围变化监听 **/
    watch(() => {
      if (props.searchInfo.timeRange) {
        return props.searchInfo.timeRange
      }
      return []
    }, (newVal) => {
      if (newVal) {
        props.searchInfo.starttime = newVal[0]
        props.searchInfo.endtime = newVal[1]
      } else {
        props.searchInfo.starttime = ''
        props.searchInfo.endtime = ''
      }
    })

    /** 分页信息 **/
    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: size.value,
    }));

    /** 主键排序变化方法 **/
    const handleTableChange = (pag, filters, sorter) => {
      if (sorter && sorter.order === "ascend") {
        props.searchInfo.sort = "1"
      } else {
        props.searchInfo.sort = "0"
      }
      props.searchInfo.current = pag.current
      props.searchInfo.size = pag.pageSize
      getData()
    };

    /** 条件查询 **/
    function searchRes() {
      getData()
    }

    /** 清空查询条件 **/
    function resetForm() {
      pageTableRef.value.resetFields();
    }

    /** 新增 **/
    function addRes() {
      if (props.showAdd) {
        context.emit('on-add')
      }
    }

    /** 刷新数据 **/
    proxy.$mitt.on('refresh', () => getData())

    onBeforeUnmount(() => {
      proxy.$mitt.off('refresh')
    })
    return {
      ...toRefs(dataSource),
      ...toRefs(props),
      pagination,
      loading,
      resetForm,
      handleTableChange,
      searchRes,
      addRes,
    }
  }
}
</script>

<style>
.query-div {
  margin-bottom: 10px;
  padding: 5px 0 5px 10px;
  box-shadow: 0 0 10px #f0f1f2;
}

.query-form {
  justify-content: space-between;
}

.query-form > div {
  margin-bottom: 10px !important;
}

.query-form .ant-form-item-label label {
  width: 70px !important;
}

.query-form .ant-form-item-control-input-content {
  width: 200px;
}

.query-button {
  display: flex;
  justify-content: center;
}

.query-button button {
  margin-right: 10px;
}

.ant-table-striped .table-striped td {
  background-color: #fafafa;
}
</style>
